<template>
    <v-container class="full-height text-center justify-space-around d-flex flex-column">
        <div>
            <div class="title accent--text font-weight-bold pa-3">
                请输入对应文件的提取码CODE，此提取码CODE为一次性，使用后将失效
            </div>
            <CodeInput ref="codeinput" :maxlength="6" class="pa-3" type="box" v-model="code" @finish="finishCode"></CodeInput>
        </div>
<!--                <div class="white&#45;&#45;text subtitle-2 pa-3" @click="weixinCode">忘记你的PIN CODE?</div>-->
        <v-dialog
                v-model="loading"
                hide-overlay
                persistent
                width="300"
        >
            <v-card
                    color="accent"
                    dark
            >
                <v-card-text>
                    <p class="py-3">正在打印中，请稍后...</p>
                    <v-progress-linear
                            indeterminate
                            color="white"
                            class="mb-0"
                    ></v-progress-linear>
                </v-card-text>
            </v-card>
        </v-dialog>
        <v-snackbar
                v-model="snackbar"
                color="accent"
        >
            {{ text }}
            <v-btn
                    color="info"
                    text
                    @click="snackbar = false"
            >
                <v-icon small color="red">mdi-close</v-icon>
            </v-btn>
        </v-snackbar>
        <div class="bottom">
            <keyboard
                    v-model="code"
                    @input="changed"
                    :layouts="['1234567890{delete:backspace}|QWERTYUIOP|ASDFGHJKL|ZXCVBNM']"
                    :maxlength="6"
            ></keyboard>
        </div>
    </v-container>
</template>

<script>
    import CodeInput from '@/components/code-input/code-input.vue'
    import {printingProcedure} from "../../api/print";
    import { sendSubscribeMessage } from '../../api/common'
    import keyboard from '@/components/keyboard';

    export default {
        components: {
            CodeInput,
            keyboard
        },
        name: "enter-code",
        data() {
            return {
                code: '',
                loading: false,
                snackbar: false,
                text: ''
            }
        },
        methods: {
            finishCode(code) {
                this.loading = true;
                printingProcedure({
                    code: code
                }).then(res => {
                    this.loading = false;
                    this.snackbar = true;
                    this.$refs['codeinput'].clear();
                    this.text = '云打印成功，请及时取走自己的文件'
                    sendSubscribeMessage({ code: code })
                }).catch(err => {
                    this.loading = false;
                    this.snackbar = true;
                    this.text = err.message;
                    this.$refs['codeinput'].clear();
                })
            },
            weixinCode() {

            },
            changed(value) {
                // console.log(value)
            },
        }
    }
</script>

<style scoped>
.bottom {
    width: 100%;
}
</style>
